<template>
  <div class="box-content">
    <div class="box-content-header">
      <p>系统概况</p>
      <span>
        <p style="color:#fff;">
          {{ companyName }} <span style="marign:0 10px;"></span>
          {{ companyAddress }}
        </p>
      </span>
    </div>
    <div class="box-content-body">
      <div class="body-title-block"></div>
      <div class="body-top-block">
        <div class="grid">
          <div class="img">
            <svg-icon icon-class="shebeiquanbu" />
          </div>
          <p>设备总数</p>
          <h2>{{ deviceCount }}</h2>
        </div>
        <div class="grid">
          <div class="img">
            <svg-icon icon-class="shebeizhengchang" />
          </div>
          <p>在线设备</p>
          <h2>{{ onlineDeviceCount }}</h2>
        </div>
        <div class="grid">
          <div class="img">
            <svg-icon icon-class="shebeilixian" />
          </div>
          <p>离线设备</p>
          <h2>{{ offlineDeviceCount }}</h2>
        </div>
        <div class="grid">
          <div class="img">
            <svg-icon icon-class="anquantianshu" />
          </div>
          <p>运行天数</p>
          <h2>{{ safeDays }}</h2>
        </div>
      </div>
      <div class="body-bottom-block">
        <div class="img-container">
          <VueDraggableResizable
            :resizable="false"
            w="700"
            h="500"
            className="show-dragable-element"
          >
            <div class="plane">
              <img :src="imgUrl" alt="" width="100%" height="100%" />
              <div
                class="icon"
                v-for="(item, index) in currentDevice.dstrChartDeviceDTOList"
                :key="index"
                :style="{ left: item.x + 'px', top: item.y + 'px' }"
              >
                <div class="sub-icon">
                  <v-popover
                    @show="handlePopShow(item)"
                    trigger="click"
                    placement="auto-end"
                  >
                    <img
                      :src="genUrl(item.dstrChartStateEnum)"
                      alt="当前设备"
                    />
                    <template slot="popover">
                      <div class="custom-popover-tontainer">
                        <div class="title">
                          <span>{{ deviceDetail.deviceName | cutStr }}</span>
                        </div>
                        <div class="body">
                          <p>
                            设备名称：
                            <a
                              href="javascript:void(0);"
                              style="text-decoration:underline;"
                              @click="handleClickToDeviceDetail()"
                              >{{ deviceDetail.deviceName }}</a
                            >
                          </p>
                          <p>设备位置：{{ deviceDetail.location }}</p>
                          <p v-if="deviceDetail.content">
                            报警事件：<a
                              href="javascript:void(0);"
                              style="text-decoration:underline;"
                              @click="handleClicktoErrorDetail()"
                              >{{ deviceDetail.content }}</a
                            >
                          </p>
                        </div>
                      </div>
                    </template>
                  </v-popover>
                </div>
              </div>
            </div>
          </VueDraggableResizable>
        </div>
        <div class="control">
          <div
            v-for="(item, index) in indexDistributionDTOList"
            :key="index"
            @click="chooseDevice(item)"
            :class="{
              active: item.distributionId === currentDevice.distributionId
            }"
          >
            <span>{{ item.distributionName }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VueDraggableResizable from "vue-draggable-resizable";
import "vue-draggable-resizable/dist/VueDraggableResizable.css";

import {
  getIndexGallery,
  genGalleryUrl,
  yulanImage,
  // getDeviceDetail,
  getDeviceInXiTongGaiKuang
} from "@/api";
import currentGreen from "@/assets/img/current-green.png";
import currentRed from "@/assets/img/current-red.png";
// import currentYellow from '@/assets/img/current-yellow.png'
import currentGrey from "@/assets/img/current-grey.png";
// import params from '../../pages/history/deviceParams'

function fontNumber(value) {
  if (value) {
    const length = value.length;
    if (length > 10) {
      let str = "";
      str = value.substring(0, 10) + "...";
      return str;
    } else {
      return value;
    }
  }
  return "";
}

export default {
  components: {
    VueDraggableResizable
  },
  filters: {
    cutStr(value) {
      return fontNumber(value);
    }
  },
  watch: {
    companyId() {
      this.init();
    }
  },
  props: {
    companyId: {
      type: String,
      default: ""
    }
  },
  data: () => ({
    indexDistributionDTOList: [],
    currentDevice: {},
    imgUrl: null,
    companyName: "",
    companyAddress: "",
    deviceCount: "",
    offlineDeviceCount: "",
    onlineDeviceCount: "",
    safeDays: 0,
    deviceDetail: ""
  }),
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      const vm = this;
      const companyId = vm.companyId;
      if (!companyId) return;
      const params = { companyId };
      const { code, data } = await getIndexGallery(params);
      if (code !== 200) return;
      const {
        indexDistributionDTOList,
        companyName,
        companyAddress,
        deviceCount,
        offlineDeviceCount,
        onlineDeviceCount,
        safeDays
      } = data;
      vm.indexDistributionDTOList = [...indexDistributionDTOList];
      vm.companyName = companyName;
      vm.companyAddress = companyAddress;
      vm.onlineDeviceCount = onlineDeviceCount;
      vm.deviceCount = deviceCount;
      vm.safeDays = safeDays;
      vm.offlineDeviceCount = offlineDeviceCount;
      if (indexDistributionDTOList.length > 0) {
        vm.currentDevice = indexDistributionDTOList[0];
        // console.log(vm.currentDevice)
        // yun3
        // vm.imgUrl = genGalleryUrl(this.currentDevice.imgUrl)

        // 大众
        vm.imgUrl = yulanImage(this.currentDevice.distributionId);
      }
    },

    chooseDevice(item) {
      const vm = this;
      vm.currentDevice = { ...item };
      // yun3
      // vm.imgUrl = genGalleryUrl(vm.currentDevice.imgUrl)

      // 大众
      vm.imgUrl = yulanImage(vm.currentDevice.distributionId);
    },

    handleClicktoErrorDetail() {
      const vm = this;
      const { exceptionsId } = vm.deviceDetail;
      vm.$router.push(`/user/errorthing/${exceptionsId}`);
    },
    handleClickToDeviceDetail() {
      const vm = this,
        deviceId = vm.deviceDetail.deviceId;
      vm.$router.push(`/user/device/${deviceId}`);
    },

    handlePopShow(item) {
      const vm = this,
        companyId = vm.companyId,
        { deviceId } = item,
        params = { companyId, deviceId };
      getDeviceInXiTongGaiKuang(params).then(({ code, data }) => {
        if (code !== 200) {
          vm.deviceDetail = {};
          return false;
        }
        vm.deviceDetail = data;
      });
    },

    genUrl(item) {
      const { code } = item;
      // 0 正常（绿色） 1 报警（红色） 2 离线（灰色）
      switch (code) {
        case 1:
          return currentRed;
        case 2:
          return currentGrey;
        case 0:
        default:
          return currentGreen;
      }
    }
  }
};
</script>
